<!-- 标签页面 -->
<template>
  <div class="tabs-container">
      <div class="ticai">
          <div class="title">
              <span id="name">题材</span>
              <span id="all">选择你喜欢</span>
          </div>
          <div class="main">
              <div class="row" v-for="rows in ticais" :key="rows">
                <el-card shadow="hover" :body-style="{ padding: '0px' }"
                class="card" v-for="col in rows" :key="col">
                <router-link to="/home/find/onetabs"> <img src="@/images/4.png" alt="" width="150px" height="150px">
                 <div class="zhe">
                    <span>{{col}}</span>
                </div></router-link>
               
               
              </el-card>
              </div>
              
          </div>

      </div>
      <div class="fengge">
          <div class="title">
                <span id="name">风格</span>
              <span id="all">选择你喜欢</span>
          </div>
          <div class="main">
              <div class="row" v-for="rows in ticais" :key="rows">
                <el-card shadow="hover" :body-style="{ padding: '0px' }"
                class="card" v-for="col in rows" :key="col">
                <img src="@/images/4.png" alt="" width="150px" height="150px">
                <div class="zhe">
                    <span>{{col}}</span>
                </div>
              </el-card>
              </div>
              
          </div>
      </div>
      <div class="qicai">
          <div class="title">
                <span id="name">器材</span>
              <span id="all">选择你喜欢</span>
          </div>
          <div class="main">
              <div class="row" v-for="rows in ticais" :key="rows">
                <el-card shadow="hover" :body-style="{ padding: '0px' }"
                class="card" v-for="col in rows" :key="col">
                <img src="@/images/4.png" alt="" width="150px" height="150px">
                <div class="zhe">
                    <span>{{col}}</span>
                </div>
              </el-card>
              </div>
              
          </div>
      </div>
      <div class="place">
          <div class="title">
                <span id="name">地区</span>
              <span id="all">选择你喜欢</span>
          </div>
          <div class="main">
              <div class="row" v-for="rows in ticais" :key="rows">
                <el-card shadow="hover" :body-style="{ padding: '0px' }"
                class="card" v-for="col in rows" :key="col">
                <img src="@/images/4.png" alt="" width="150px" height="150px">
                <div class="zhe">
                    <span>{{col}}</span>
                </div>
              </el-card>
              </div>
              
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        ticais:[
            ['风光','人像','城市','纪实','旅行'],
            ['街拍','夜景','少女','写真','人文'],
            ['宠物','光影','静物','花卉','建筑'],
        ]
    };
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
.tabs-container{
    margin:50px 200px;
    .title{
        height:50px;
        #name{
            font-size:40px;
            letter-spacing: 5px;
        }
        #all{
            font-size: 18px;
            margin-left:20px;
            color:#909399;
            letter-spacing: 3px;
        }

    }
    .main{
        margin-bottom: 100px;
        .row{
            width:100%;
            display: flex;
            justify-content: space-between;
            margin:20px 0;
            .card{      
                 position: relative;
                 height: 150px;
                 .zhe{
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                top:0;
                bottom:0;
                left:0;
                right:0;
                background-color: rgba(0,0,0,0.5);
                span{
                    font-size:20px;
                    letter-spacing: 2px;
                    color:#fff;
                }
            }
            }
           
        }
    }
}
</style>